<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. -->
<!-- This file shows how to design a first-run page that provides a welcome screen to the user about the features of the add-in. -->

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Office Add-ins Smart Alerts using SSO sample</title>

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
    
    <script type="text/javascript" src="taskpane.js"></script>

    <!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui#/. -->
    <link rel="stylesheet" href="https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-core/11.1.0/css/fabric.min.css"/>

    <!-- Template styles -->
    <link href="taskpane.css" rel="stylesheet" type="text/css" />
</head>

<body class="ms-font-m ms-welcome ms-Fabric">
    <header class="ms-welcome__header ms-bgColor-neutralLighter">
        <img width="90" height="90" src="../../assets/logo-filled.png" alt="Contoso" title="Contoso" />
        <h1 class="ms-font-su">Welcome</h1>
    </header>
    <main class="ms-firstrun-instructionstep">
        
        <section class="ms-firstrun-instructionstep__header">
            <h2 class="ms-font-m"> This add-in demonstrates how to use single sign-on (SSO) in an Outlook event.
                When you compose a new message, the event gets your user profile data from Microsoft Graph,
                and appends a signature with your profile data.</h2>
            <div class="ms-firstrun-instructionstep__header--image"></div>
        </section>
        <div id="welcome-body" class="ms-firstrun-instructionstep__welcome-body">
            <p class="ms-font-m ms-firstrun-instructionstep__welcome-intro"><b>To use this add-in:</b></p>
            <ul class="ms-List ms-firstrun-instructionstep__list">
                <li class="ms-ListItem">
                    <span class="ms-ListItem-primaryText">Create a new message or appointment. The add-in will display a notification with the email signature it will append.</b>
                        button.</span>
                    <div class="clearfix"></div>
                </li><li class="ms-ListItem">
                    <span class="ms-ListItem-primaryText">If you are not signed in, 
                        or have not consented to the scopes the add-in requires, choose the <b>Sign in and consent</b>
                        button. Outlook events cannot display dialogs, so you must use the task pane
                        if you need to sign in or consent. After you sign in and consent, the events can use SSO.</span>
                    <div class="clearfix"></div>
                </li>
            </ul>
            <br>
            <p align="center">
                <button id="getProfileButton" class="popupButton ms-Button ms-Button--primary"><span
                        class="ms-Button-label">Sign in and consent</span></button>
            </p>
        </div>
        <p><label id="message-area"></label></p>
    </main>
</body>

</html>
